﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>钻孔测深</title>
    <link href="../../Content/css/jquery.dataTables.css" rel="stylesheet" />
    <link href="../../Content/css/tracking3d.css" rel="stylesheet" />
    <link href="../../Content/css/dataTables.fixedHeader.min.css" rel="stylesheet" />
    <link href="../../Content/css/dataTables.scroller.min.css" rel="stylesheet" />
    <link href="../../Content/css/select2.css" rel="stylesheet" />
    <link href="../../Content/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div id="body" class="container" style="width:97%" >
        <div style="text-align: center;margin:5px 0;height:50px">
            <span>钻孔编号：</span>
            <span id="holeIds" style=" width: 60%; margin-top: 0px;"></span>
            <button id="btnShow" class="btn btn-primary">展示</button>
        </div>
        <div class="row" style="height:93%">
            <div id="container" class="col-md-12" style="height:100%">
            </div>
            <div id="dataContainer" class="col-md-4" style="display:none;height:100%;top:10px">
            </div>
        </div>
    </div>
    
  
    <footer>

        <script src="../../Scripts/libs/jquery.js"></script>
        <script src="../../Scripts/libs/jquery.mousewheel.js"></script>
        <script src="../../Scripts/libs/Three.js"></script>
        <script src="../../Scripts/libs/RequestAnimationFrame.js"></script>
        <script src="../../Scripts/libs/stats.min.js"></script>
        <script src="../../Scripts/libs/jsUtils.js"></script>
        <script src="../../Scripts/libs/dat.gui.min.js"></script>
        <script src="../../Scripts/libs/canvasjs.min.js"></script>
        <script src="../../Scripts/libs/jquery.dataTables.min.js"></script>
        <script src="../../Scripts/libs/dataTables.fixedHeader.min.js"></script>
        <script src="../../Scripts/libs/select2.js"></script>
        <script src="../../Scripts/libs/bootstrap.min.js"></script>
        <script src="../../Scripts/controls/TrackballControls.js"></script>
        <script src="../../Scripts/controls/FirstPersonControls.js"></script>
        <script src="../../Scripts/controls/OrbitControls.js"></script>
        <script src="../../Scripts/sim/sim.js"></script>
        <script src="../../Scripts/three-helper.js"></script>

        <script src="../../Content/fonts/optimer_regular.typeface.js"></script>

        <script>

            var container = $("#container")[0];
            var yzdata = [];
            yzdata.push({ type: "line", dataPoints: [{ x: new Date(2012, 01, 1), y: 71, indexLabel: "", markerType: "triangle", markerColor: "#6B8E23", markerSize: 12 }] });
            var chart = new CanvasJS.Chart("container", {
                zoomEnabled: false,
                title: {
                    text: "钻孔测深"
                },
                axisY: {
                    title: "深度(米)"
                },
                axisX: {
                    title: "时间(分钟)",
                },
                legend: {
                    horizontalAlign: "center",
                    verticalAlign: "top"
                },
                data: yzdata,  // random generator below
                click: function () {
                    alert('1');
                }
            });


            $(document).ready(function () {

                var pageSize = 1; //查找5天的数据。
                $("#holeIds").select2({
                    placeholder: "请选择最多5个钻孔编号",
                    maximumInputLength: 10,
                    maximumSelectionSize: 5,
                    multiple: true,
                    ajax: {
                        dataType: 'jsonp',
                        quietMillis: 50,
                        //The url of the json service
                        url: "../../Controllers/DrillingDataController.ashx?cmd=GetHoleIds&Path=shendu",
                        //Our search term and what page we are on
                        data: function (term, page) {
                            return {
                                pageSize: pageSize,
                                pageNum: page,
                                searchTerm: term
                            };
                        },
                        results: function (data, page) {
                            var select2Results = [];
                            var d = $.parseJSON(data);
                            var more = (page * pageSize) < d.Total;
                            for (var i = 0; i < d.Results.length; i++) {
                                var item = d.Results[i];
                                var group = select2Results[item.Group];
                                if (!group) {
                                    group = { text: item.Group, children: [] };
                                }
                                for (var j = 0; j < item.Options.length; j++) {
                                    var option = item.Options[j];
                                    group.children.push({ id: option.id, text: option.text });
                                }

                                select2Results.push(group);
                            }

                            return {
                                results: select2Results, more: more
                            };
                        }
                    },
                    dropdownCssClass: "bigdrop",
                    escapeMarkup: function (m) { return m; }
                });

               
                
             
                $("#btnShow").click(function () {
                    
                    yzdata.length = 0;
                  
                    var list = $("#holeIds").select2("val");
                    if (!list && list.length == 0) return;
                    $.getJSON("../../Controllers/DrillingDataController.ashx?cmd=GetHoleData&Path=shendu", { holeId: list }, function (result) {
                        for (key in result) {
                            var list = result[key];
                            if (!result[key].length) {
                                continue;
                            }
                            var yz = [];

                            var minTime = Date.parse(list[0].Date);
                            for (var i = 0; i < list.length; i++) {
                                var v = list[i];
                                var time = new Date( Date.parse(v.Date));
                                var diff = new Date(time - minTime) / 1000 / 60;
                                if (v.Depth >= 0) {
                                    yz.push({ x: diff, y: v.Depth, name: time.getFullYear()+"-"+(time.getMonth()+1)+"-"+time.getDay()+" "+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds()});
                                } else {
                                    yz.push({ x: diff, y: 0, name: time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDay() + " " + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds() });
                                }
                            }
                            yzdata.push(
                                {
                                    type: "line",
                                    toolTipContent: "编号：" + key + "  深度：{y}<br>" + "时间：{name}",
                                    showInLegend: "true",
                                    name: key,
                                    dataPoints: yz,
                                    click: showData,
                                    data: list
                                });
                        }

                        chart.render();

                    }).error(function (jqXHR, textStatus, errorThrown) {
                        console.log("error " + textStatus);
                        console.log("incoming Text " + jqXHR.responseText);
                    });
                });
                
                var showData = function (e) {
                    if ($("#dataContainer").is(":visible")) {
                        $("#container").attr('class', 'col-md-12');
                        $("#dataContainer").hide();
                    } else {
                        $("#container").attr('class', 'col-md-8');
                        $("#dataContainer").show();
                    }
                  
                    chart.render();
                    var data = e.dataSeries.data;
                    $("#dataContainer").empty();
                  
                    $("#dataContainer").append("<table class='display' cellspacing='0' id='example'></table>");
                  
                    var dataSet = [];
                    for (var i = 0; i < data.length; i++) {
                        var p = data[i];
                        dataSet.push([p.Id, p.GroupNum, p.Date, p.Depth.toFixed(2), p.SensorData.toFixed(0)]);
                    }
                    var height = $("#container").height()-60;
                  
                    var table = $('#example').dataTable({
                        scrollX: true,
                        scrollY:height,
                        scrollCollapse: true,
                        "paging": false,
                        "data": dataSet,
                        "ordering": false,
                        "info": false,
                        "searching": false,
                        "dom": '<"top"i>rt<"bottom"flp><"clear">',
                       
                        "columns": [
                            { "title": "钻孔编号" },
                            { "title": "班组编号" },
                            { "title": "时间"},
                            { "title": "深度(米)" },
                            { "title": "钻杆数" },
                        ],
                       
                    });

                    $("#example_wrapper").css("width", $("#dataContainer").width());
                };

                $(window).bind('resize', function () {
                    $("#example_wrapper").css("width", $("#dataContainer").width());
                });
            });
        </script>

        <script>
            function windowHeight() {
                var de = document.documentElement;
                return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
            }

            window.onload = window.onresize = function () {
                var wh = windowHeight();
                document.getElementById("body").style.height = wh-50 + "px";
                chart.render();
            }
        </script>

    </footer>
</body>
</html>
